<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>智慧教学平台</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/muke.css">
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="js/elementui/index.css"/>


    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/elementui/index.js"></script>
    <!--<script src="js/index.js"></script>-->
    <script src="js/axios.min.js"></script>


    <link rel="stylesheet" href="curricular/static/font-awesome//4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="curricular/static/highlight.js/9.8.0/monokai-sublime.min.css">
    <link rel="stylesheet" href="curricular/app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="curricular/app/css/libs/katex/0.6.0/katex.min.css">
    <link rel="stylesheet" href="curricular/app/css/libs/videojs/5.11.7/video-js.min.css">
    <link rel="stylesheet" href="curricular/app/css/dest/styles.css?=2016121272249">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/muke.css">
    <style>
        html, body {
            background: rgb(248, 248, 248);
        }

        .bootcamp-courses-item {
            background: #fff;
        }

        .img_backg1 {
            background-image: none;
        }

        #bt {
            height: 120px;
        }

        .media {
            overflow: auto !important;
        }
    </style>
</head>
<body class="backg_huibai">
<div id="app">
    <!-- 顶部 -->
    <div class="width100 float_l img_backg1" id="bt">
        <div class="width100 float_l height80 line_hei80">
            <!-- 顶部左边 -->
            <div class="float_l">
                <div class="float_l margin_l20">
                    <a href="index.html"> <img src="img/uiz1.png"></a>
                </div>
                <div class="float_l">
                    <ul class="ul_li fon_siz16">
                        <li><a class="color_black" href="curricular/courses/index.html">课程</a></li>
                        <li><a class="color_black" href="department.html">院系</a></li>
                        <li><a class="color_black" href="curricular/paths/index.html">名师专栏</a></li>

                    </ul>
                </div>
            </div>

            <!-- 顶部右边 -->
            <div class="float_r">
                <div class="float_l top_input">
                    <input class="posi_relative" type="text" name="" id="sear-content" placeholder="请输入想搜索的内容...">
                    <img class="img_sousuo bianshou" src="img/uiz4.png" @click="search">
                </div>
                <div class="float_l margin_l20">
                    <img src="img/uiz5.png">
                </div>
                <div class="float_l margin_l35">
                    <img src="img/uiz6.png">
                </div>
                <div class="float_l margin_l30 margin_r40">
                    <a class="color_black" href="curricular/user/13/course.html" v-show="isCenter">个人中心</a>&nbsp;&nbsp;
                    <a class="btn btn-default navbar-btn sign-in" href="javascript:void(0)" @click="login()"
                       v-show="isShow">登录</a>
                    <el-dropdown>
                        <div class="color_black" v-show="isCenter">
                            <img :src="userPhoto" width="45px">
                            <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="shezhi()">设置</el-dropdown-item>
                            <el-dropdown-item @click.native="tuichu()">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>

            </div>

        </div>
    </div>
    <div style="clear:both;"></div>
    <div class="container">
        <div class="row">


            <div v-if="courData.length==0" style="width: 100%;text-align: center;font-size: 50px;color:rgb(8,191,145);">
                暂无数据
            </div>
            <div class="media bootcamp-courses-item" v-for="c in courData">
                <div class="media-left bootcamp-courses-media">
                    <img style="width: 280px;height: 140px" class="media-object" :src="c.cour_picurl">
                </div>
                <div class="media-body bootcamp-courses-body">
                    <div class="bootcamp-courses-info">
                        <h4 class="media-heading"><span>已上线</span>{{c.cour_name}}</h4>
                        <div>
                            <p>{{c.cour_content}}</p>
                        </div>
                      <!--  <div>推荐先学：<a href="https://www.xxxxxx.com/courses/1" target="_blank">Linux基础入门</a></div> -->
                        <div>
                            <p>浏览次数：<a class="tagStyle2">{{c.cour_pageview == null? 0:c.cour_pageview}}</a></p>
                        </div>
                    </div>
                    <div class="bootcamp-courses-subscribe">
                        <div class="pull-right bootcamp-courses-order">
                            <a class="'btn pull-right"
                               :href="'/student/curricular/courses/show.html?courId='+c.cour_id">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <el-row type="flex" justify="center" style="margin-top: 15px;">
        <el-pagination
                layout="prev, pager, next"
                :current-page.sync="query.page"
                :page-size="query.rows"
                @current-change="searchCourse"
                :total="query.total">
        </el-pagination>
    </el-row>
    <!-- 页脚 -->
    <div class="width100 float_l padding_t30 height193">
        <div class="width_1200 margin_auto">
            <div class="width100 float_l text_c margin_b30">
                <a class="img_backg5" href="#"></a>
                <a class="img_backg6 posi_relative wexinmaxianshi" href="#"><i class="weixinweima dis_none"><img
                        src="img/idx-btm.png"></i></a>
                <a class="img_backg7" href="#"></a>
                <a class="img_backg8" href="#"></a>
            </div>
            <div class="width100 float_l text_c yejiao color_gray">
                <a>关于我们</a>
                <a>企业合作</a>
                <a>人才招聘</a>
                <a>讲师招募</a>
                <a>联系我们</a>
                <a>意见反馈</a>
                <a>友情链接</a>
            </div>
            <div class="width100 float_l text_c border_t margin_t20 padding_t20 color_gray fon_siz12">
                <span>© 2016 imoroc.com 京ICP备13042132号</span>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let main = {
        data() {
            return {
                isShow: true,
                isCenter: false,
                userPhoto: '',
                query: {
                    name: '',
                    page: 1,
                    rows: 10,
                    total: 0
                },
                courData: []
            }
        },
        methods: {
            tuichu() {
                sessionStorage.clear();
                localStorage.clear();
                window.location.href = "http://127.0.0.1/login.html";
            },
            shezhi() {
                window.location.href = "/student/curricular/user/13/personal.html";
            },
            login() {
                window.location.href = "http://127.0.0.1/login.html";
            },
            search() {
                this.query.name = $("#sear-content").val();
                this.searchCourse();
            },
            searchCourse() {
                axios({
                    method: 'get',
                    url: '/api/student/home/homeSearch',
                    params: {
                        value: this.query.name,
                        page: this.query.page,
                        size: this.query.rows,
                        orderby: 'desc',
                        conditions: 'cour_studypeople'
                    }
                }).then(res => {
                    res = res.data;
                    this.courData = res.rows.map(item => {
                        if (item.cour_picurl == null || item.cour_picurl == "") {
                            item.cour_picurl = "/student/img/timg.jpg";
                        }
                        return item;
                    });
                    this.query.total = res.total;
                })
            }
        },
        mounted() {
            let name = sessionStorage.getItem("search_name");
            this.query.name = name;
            this.searchCourse();
            var roleNames = sessionStorage.getItem("roleNames");
            if (roleNames != null && roleNames == ("学生")) {
                this.isShow = false;
                this.isCenter = true;
                this.userPhoto = sessionStorage.getItem("userPhoto");
            }
        }
    }
    const Component = Vue.extend(main);
    new Component().$mount('#app')
</script>
</html>
